<template>
  <div class="gift-wrap" v-if="tableData">
    <el-table
    :data="tableData"
    style="width: 100%"
    max-height="770"
    >
    <el-table-column
      prop="id"
      label="ID"
      width="50">
    </el-table-column>
    <el-table-column
      prop="avatar"
      label="商品图片"
      width="100">
      <template slot-scope="{ row }">
        <el-image
        style="width: 100px; height: 100px"
        :src="row.avatar"
        fit="contain"></el-image>
      </template>
    </el-table-column>
    <el-table-column
      prop="title"
      label="礼包名称"
      width="120">
    </el-table-column>
    <el-table-column
      prop="number"
      label="数量"
      width="120">
    </el-table-column>
    <el-table-column
      prop="price"
      label="价格"
      >
    </el-table-column>
    <el-table-column
      label="状态">
      <template slot-scope="{ row }">
      <el-link v-if="row.status" type="success">启用中</el-link>
      <el-link v-else type="danger">禁用中</el-link>
      </template>
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="110">
      <template slot-scope="scope">
        <el-button @click="handledelete(scope.row.id)" type="text" size="small">改变状态</el-button>
        <el-button @click="edit(scope.row)" type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div class="pages" v-if="page">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="currentPage3"
        :page-size="20"
        :total="page.last_page"
        layout="prev, pager, next, jumper">
      </el-pagination>
  </div>
  </div>
</template>

<script>
export default {
  name: 'list',
  data() {
    return {
      tableData: null,
      page:null,
      currentPage3: 1
    }
  },
  created(){
    this.fetch()
  },
  methods:{
    async fetch(){
      const res = await this.$get('/api/store/admin/tera/list');
      this.tableData = res.data.data;
      this.page = res.data;
    },
    edit(data){
      this.$router.push({name:'giftEdit',params: { data: data }})
    },
    async handledelete(id){
      const res = this.$get('/api/store/admin/tera/list');
    },
    handleSizeChange(val) {
        console.log(`每页 ${val} 条`);
      },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`);
    }
  }
}
</script>
<style lang="less" scoped>
.gift-wrap {
  .pages {
    padding: 5px;
    text-align: center;
  }
}

</style>
